// import React from 'react'; // React 19不再需要显式导入
import styles from './ProductList.module.css';

// 导入商品图片
import goods30 from '../assets/goods-30.jpg';
import goods90 from '../assets/goods-90.jpg';
import goods180 from '../assets/goods-180.jpg';
import goods360 from '../assets/goods-360.jpg';

interface Product {
  id: number;
  name: string;
  image: string;
  price: number;
  payUrl: string;
}
// const baseURL = 'http://127.0.0.1:9000';
const baseURL = '/api';

const productsData: Product[] = [
  {
    id: 1,
    name: '马口铁款',
    image: goods30,
    price: 30,
    payUrl: `${baseURL}/alipay/create_payment/1`,
  },
  {
    id: 2,
    name: '滴胶款',
    image: goods90,
    price: 90,
    payUrl: `${baseURL}/alipay/create_payment/1`,
  },
  {
    id: 3,
    name: '这个是一块钱',
    image: goods180,
    price: 180,
    payUrl: `${baseURL}/alipay/create_payment/1`,
  },
  {
    id: 4,
    name: '这个真是100块',
    image: goods360,
    price: 100,
    payUrl: `${baseURL}/alipay/create_payment/100`,
  },
];


const ProductList = () => {
  return (
    <div className={styles.productList}>
      {productsData.map((product) => (
        <div key={product.id} className={styles.productCard}>
          <img src={product.image} alt={product.name} className={styles.productImage} />
          <h2 className={styles.productName}>{product.name}</h2>
          <p className={styles.productPrice}>¥{product.price.toFixed(2)}</p>
          <div className={styles.buttonGroup}>
            <a href={product.payUrl} className={styles.buyButton}>
              购买
            </a>
          </div>
        </div>
      ))}
    </div>
  );
};

export default ProductList; 